<template>
  <div class="relative overflow-hidden rounded-lg p-6 mb-8" :class="backgroundClass">
    <div class="relative z-10">
      <h3 class="text-xl font-semibold mb-2" :class="textColorClass">{{ title }}</h3>
      <p :class="textColorClass">{{ description }}</p>
      <div v-if="$slots.action" class="mt-4">
        <slot name="action" />
      </div>
    </div>
    <div ref="bgShapesRef" class="absolute inset-0 z-0 overflow-hidden opacity-40">
      <!-- 这里将显示动画形状 -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useNuxtApp } from '#app';

// Props定义
const props = defineProps<{
  title: string;
  description: string;
  variant?: 'primary' | 'secondary' | 'warning' | 'info';
}>();

// 计算的样式类
const backgroundClass = computed(() => {
  switch (props.variant) {
    case 'secondary':
      return 'bg-secondary-50 dark:bg-secondary-950';
    case 'warning':
      return 'bg-yellow-50 dark:bg-yellow-950';
    case 'info':
      return 'bg-blue-50 dark:bg-blue-950';
    case 'primary':
    default:
      return 'bg-primary-50 dark:bg-primary-950';
  }
});

const textColorClass = computed(() => {
  switch (props.variant) {
    case 'secondary':
      return 'text-secondary-800 dark:text-secondary-200';
    case 'warning':
      return 'text-yellow-800 dark:text-yellow-200';
    case 'info':
      return 'text-blue-800 dark:text-blue-200';
    case 'primary':
    default:
      return 'text-primary-800 dark:text-primary-200';
  }
});

// 动画相关代码
const bgShapesRef = ref<HTMLElement | null>(null);
const { $gsap } = useNuxtApp();

// 根据变体定义颜色
const colors = computed(() => {
  switch (props.variant) {
    case 'secondary':
      return ['#ec4899', '#db2777', '#be185d'];
    case 'warning':
      return ['#eab308', '#ca8a04', '#a16207'];
    case 'info':
      return ['#0ea5e9', '#0284c7', '#0369a1'];
    case 'primary':
    default:
      return ['#14b8a6', '#0d9488', '#0f766e'];
  }
});

onMounted(() => {
  // 创建并添加形状
  const bgShapes = bgShapesRef.value;
  if (bgShapes) {
    const shapesCount = window.innerWidth < 768 ? 15 : 30;
    for (let i = 0; i < shapesCount; i++) {
      const shape = document.createElement('div');
      shape.classList.add('shape', 'particle');

      // 设置公共样式
      shape.style.position = 'absolute';
      shape.style.borderRadius = Math.random() > 0.5 ? '50%' : '8px';

      // 随机大小
      const size = 10 + Math.random() * 40;
      shape.style.width = size + 'px';
      shape.style.height = size + 'px';

      // 随机初始位置
      shape.style.left = Math.random() * 100 + '%';
      shape.style.top = Math.random() * 100 + '%';

      // 设置颜色
      shape.style.backgroundColor = colors.value[Math.floor(Math.random() * colors.value.length)];

      bgShapes.appendChild(shape);
    }
  }

  // 使用GSAP制作粒子动画
  const particles = document.querySelectorAll('.particle');

  particles.forEach((particle) => {
    // 使用直接的随机值而不是字符串
    const randomX = Math.random() * 200 - 100; // -100 到 100 之间
    const randomY = Math.random() * 200 - 100; // -100 到 100 之间
    const randomScale = Math.random() * 1.3 + 0.2; // 0.2 到 1.5 之间
    const randomOpacity = Math.random() * 0.5 + 0.3; // 0.3 到 0.8 之间
    const randomDuration = Math.random() * 5 + 3; // 3 到 8 之间
    const randomDelay = Math.random(); // 0 到 1 之间

    $gsap.to(particle, {
      x: `${randomX}%`,
      y: `${randomY}%`,
      scale: randomScale,
      opacity: randomOpacity,
      duration: randomDuration,
      delay: randomDelay,
      repeat: -1,
      yoyo: true,
      ease: 'sine.inOut'
    });
  });

  // 标题和描述动画
  $gsap.from('.company-title', {
    opacity: 0,
    y: 20,
    duration: 0.8,
    ease: 'power2.out'
  });
});

// 分页实现
const currentPage = ref(1);
const itemsPerPage = 5;

// 计算总页数
const totalPages = computed(() => {
  let filteredTotal = /* 筛选后的总数 */;
  return Math.ceil(filteredTotal / itemsPerPage);
});

// 获取当前页数据
const paginatedData = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  return filteredCompanies.value.slice(startIndex, endIndex);
});

// 筛选功能实现
const filters = ref({
  region: '',
  // 其他筛选条件
});

// 实现筛选逻辑
const filteredCompanies = computed(() => {
  let result = [...companies];

  // 地区筛选
  if (filters.value.region) {
    result = result.filter(company => company.location.includes(filters.value.region));
  }

  // 其他筛选逻辑...

  return result;
});
</script>